<template>
  <GiTable
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['refresh','size', 'setting', 'fullscreen']"
      :disabled-column-keys="['id']"
      :selected-keys="selectedKeys"
      @select="select"
      @select-all="selectAll"
      @refresh="reset"
  >

    <template #action="{ record }">
      <a-space>
        <a-link v-permission="['settlement:salaryLog:update']" title="修改" @click="onUpdate(record)">修改</a-link>
        <!--        <a-link-->
        <!--            v-permission="['settlement:salaryLog:delete']"-->
        <!--            status="danger"-->
        <!--            :disabled="record.disabled"-->
        <!--            :title="record.disabled ? '不可删除' : '删除'"-->
        <!--            @click="onDelete(record)"-->
        <!--        >-->
        <!--          删除-->
        <!--        </a-link>-->
      </a-space>
    </template>

  </GiTable>

  <SalaryLogAddModal ref="SalaryLogAddModalRef" @save-success="search"/>
</template>

<script setup lang="ts">
import SalaryLogAddModal from "@/views/settlement/earnings/components/SalaryLogAddModal.vue";
import type {TableInstance} from '@arco-design/web-vue'
import {
  type SalaryLogResp,
  type SalaryLogQuery,
  deleteSalaryLog,
  exportSalaryLog, listSalaryLogByUserId
} from '@/apis/settlement/salaryLog'
import {useDownload, useResetReactive, useTable} from '@/hooks'
import {isMobile} from '@/utils'
import has from '@/utils/has'

defineOptions({name: 'SalaryLog'})

const props = withDefaults(defineProps<Props>(), {
  userId: '',
})

interface Props {
  userId: string
}


const [queryForm, resetForm] = useResetReactive<SalaryLogQuery>({
  employeeId: props.userId,
  status: 2,
  sort: ['id,desc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  selectedKeys,
  select,
  selectAll,
  handleDelete,
} = useTable((page) => listSalaryLogByUserId({...queryForm, ...page}), {immediate: true})
const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 70,
    align: 'center',
    render: ({rowIndex}) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    fixed: !isMobile() ? 'left' : undefined,
  },
  {title: '工资', align: 'center', dataIndex: 'salary', slotName: 'salary'},
  {title: '创建时间', align: 'center', dataIndex: 'createTime', slotName: 'createTime'},
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 160,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
  }
]


// 重置
const reset = () => {
  resetForm()
  search()
}

// // 删除
// const onDelete = (record: SalaryLogResp) => {
//   return handleDelete(() => deleteSalaryLog(record.id), {
//     content: `是否确定删除该条数据？`,
//     showModal: true
//   })
// }


const SalaryLogAddModalRef = ref<InstanceType<typeof SalaryLogAddModal>>()
// 新增
// const onAdd = () => {
//   SalaryLogAddModalRef.value?.onAdd()
// }

// 修改
const onUpdate = (record: SalaryLogResp) => {
  SalaryLogAddModalRef.value?.onUpdate(record.id)
}


// 监听 userId 的变化
watch(
    () => props.userId,
    async (newUserId) => {
      if (newUserId) {
        search()
      }
    },
    {immediate: true},
)

</script>

<style scoped lang="scss"></style>
